<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>硬件之家</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/public.css">
 </head>
 <script src="js/jquery-1.12.1.min.js"></script>
 <script src="js/data.js"></script>
 <script src="js/vue.js"></script>
 <script src="layer/layer.js"></script>
 <body>
	<!-- 头部 -->
	<div class='head'>
			<div class='head-contain  cl'>
				<div class='head-left fl '>
					<span ><a href="">收藏</a></span>
					<span>分享：
					<i title='分享到本站'></i>
					<i title='分享到微博'></i>
					<i title='分享到QQ'></i>
					<i title='分享到微信'></i>
					<i title='分享到淘宝'></i>
					<i title='分享到樱桃'></i>
					</span>
				</div>
				<div class='head-right fr '>
					<ul>
						<li class='icon'>
							<a href="index.html">
							<i></i>
							硬件之家，有内涵的攒机网站！
							</a>
						</li>
						<li class='login'>
							<a href="用户登录界面.htm">登录</a>
							<i class='rot'></i>
							<div class='slide'>
								<span></span>
								<div class="slide-menu">
									<a href="用户登录界面.htm"><i></i>账号登录</a>
									<a href="用户登录界面.htm"><i></i>微博登录</a>
									<a href="用户登录界面.htm"><i></i>QQ登录</a>
									<a href="用户登录界面.htm"><i></i>微信登录</a>
								</div>
							</div>
						</li>
						<li> <a href="用户注册.htm">注册</a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 头部结束 -->
		<!-- 搜索栏开始 -->
		<div class="search cl">
			<div class="fl">
				<a href="" class="fl"><img src="img/123.jpg" alt=""width="180px" height="80px"/></a>
				<a href="" class="fl img2"><img src="img/2.gif" alt=""width="180px" height="50px"/></a>
			</div>
			<div class="search-center fl">
				<input type="text"  class="text" placeholder='搜索信息...'/>
				<input type="submit" class="submit" value="搜配件"/>
				<p>热门推荐&nbsp;:&nbsp;&nbsp;13223132131313！</p>
			</div>
			<div class="search-right fr">
				<ul>
					<li><i></i>用户中心</li>
					<li><i></i>我的信箱</li>
				</ul>
			</div>
		</div>
		<!-- 搜索栏结束 -->
		<!-- 导航开始 -->
		<div class="nav">
			<div class="nav-contain">
				<ul>
					<div class='nav-quanbufenlei'>
						全部分类
					</div>
					<li class='select'><a href="index.html">首页</a></li>
					<li><a href="peizhixinxi.html">配置信息</a></li>
					
					<li><a href="zixun.html">配置资讯</a></li>
					<li class='nav-last'><a href="shequ.html">留言板</a></li>
					<div class='nav-diy fr' onClick="tc()">
						开始DIY>>>
					</div>
				</ul>
			</div>
		</div>
		<!-- 导航结束 -->
		<div class="main-contain cl">
			<!-- 分类开始 -->
			<div class='main-contain-fenlei fl'>
				<ul class='cl'>
					<div class="remenpinpai"></div>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<div class='quanbupinpai fl'>
						全部品牌>>>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					</div>
				</ul>
			</div>
			<!-- 品牌分类结束 -->
			<!-- 轮播推荐开始 -->
			<div class='fl'>
				<div class='lunbo '>
					<ul class='cl'>
						<li><img src="img/111.png" alt=""width="765px"height="175px" /></li>
						<li><img src="img/2222.png" alt=""width="765px"height="175px" /></li>
						<li><img src="img/333.png" alt=""width="765px"height="175px" /></li>
						<li><img src="img/4444.png" alt=""width="765px"height="175px" /></li>
						<li><img src="img/111.png" alt=""width="765px"height="175px" /></li>
					</ul>
				</div>
				<div class="tuijian1">
					<div class='tuijian1-top'>
						<div class='tuijian1-top-left'>
							推荐配置
						</div>
						<div class='pic'>
							<ul class='cl'>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</div>
						
					</div>
				</div>
			</div>
			<script type="text/javascript">
				$(function(){
					var index=0;
					var index1=0;
					setInterval(function(){
						index++;
						$(".lunbo ul").animate({"marginLeft":-765*index},500,function(){
							if(index == 4){
								$(".lunbo ul").css("marginLeft","0");
								index = 0
							}
						});
					},3800)
					setInterval(function(){
						index1++;
						$(".pic ul").animate({"marginLeft":-520*index1},500,function(){
							if(index1 == 3){
								$(".pic ul").css("marginLeft","0");
								index1 = 0
							}
						});
					},1800)
				})
			</script>
			<!-- 轮播推荐结束 -->
			<!-- 资讯开始 -->
			<div class='fr contain-right'>
				<div class='zixun'>
					<div class='zixun-top'>
						<div class='top1 fl'>攒机快报</div>
						<div class='top2 fr'>更多>>></div>
					</div>
					<div class='kuaibao'>
						<ul>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
							<li>2017年CPU天梯图</li>
						</ul>
					</div>
					<div class='kuaibao-lunbo '>
						<div class='remenfangan'>热门方案</div>
						<ul class='uli cl'>
							<li>1.第六代处理器图形音像游戏全套电脑配置</li>
							<li>2.第六代处理器图形音像游戏全套电脑配置</li>
							<li>3.第六代处理器图形音像游戏全套电脑配置</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class='sec-contain'>
			<div class='sec-left fl '>
				<div class='jiage'>
					自定义价格：
					<input type="text" class='jt'/>
					<input type="submit" class='js'value='搜索'/>
				</div>
				<div class='tupian'></div>
			</div>
			<!-- 中 -->
			<div class='sec-center fl' id='app'>
				<ul>
					<li v-for="item in items" class='fl'>
						<div class='yi'>#名称</div>
						<div class='er'><img src="{{item.path}}" width="200px" height="65px"></div>
						<div class='san'>
							<p class='zhuyao'>主要配件</p>
							<p>&nbsp;&nbsp;&nbsp;cpu: <lable>{{item.cpuname}}&nbsp;&nbsp;&nbsp;</lable></p>
							<p>&nbsp;&nbsp;&nbsp;显卡:<lable>{{item.gpuname}}&nbsp;&nbsp;&nbsp;</lable></p>
							<p>&nbsp;&nbsp;&nbsp;硬盘:<lable>{{item.ypname}}&nbsp;&nbsp;&nbsp;</lable></p>
							<p>&nbsp;&nbsp;&nbsp;内存:<lable>{{item.zbname}}&nbsp;&nbsp;&nbsp;</lable></p>
							<p>&nbsp;&nbsp;&nbsp;主板:<lable>{{item.ncname}}&nbsp;&nbsp;&nbsp;</lable></p>
							<p class='san-last'>&nbsp;&nbsp;&nbsp;机箱:<lable>{{item.jxname}}&nbsp;&nbsp;&nbsp;</lable></p>
							<div class='si'>总价:{{item.price}}</div>
						</li>
				</ul>
				<script type="text/javascript">
					var vm = new Vue({
						el: '#app',
						data: {
							items:data
						},
						computed: {
							total:function(){
								var total = 0;
								this.items.forEach(function(item){
									total+=item.price*item.num;
								})
								return total;
							}
						}
					});
				</script>
			</div>
			<div class='sec-right fr'>
				<div class='three'>DIY硬件选用排行>>></div>
				<div class='paihang ' id='app2'>
<div class='phb'>
							<div class='phb-1 '>
								<ul>
									<div style="">
    <div id="box">
      <ul id="ul1">
        <li class="sel">CPU</li>
        <li>显卡</li>
        <li>内存</li>
      </ul>
    </div>
                                    
									<div id="content1">
                                    <div class="tab" style="display:block;">
                                    
                                   
                                    <li v-for="part in parts" style="width:215px;height:50px;">
                                     {{part.cpuname}}
                                    </li>
                      
									</div>
                                    
                                    <div class="tab" style="display:none;"> 
                                    
                                   
                                    <li v-for="part in parts" style="width:215px;height:50px;">
                                     {{part.gpuname}}
                                    </li>
                                 
									</div>
                                    
                                    <div class="tab" style="display:none;"> 
                                    
                                 
                                    <li v-for="part in parts" style="width:215px;height:50px;">
                                     {{part.ncname}}
                                    </li>
                                
									</div>
                                    
                                  </div>
                                    
								</ul>
</div></div></div>
<div class='paihang ' id='app3'>
						<div class='phb'>
							<div class='phb-1 '>
								<ul>
									<div style="">
										<div id="box">
											<ul id="ul2">
												 <li class='sel'>主板</li>
												<li>硬盘</li>
												<li>机箱</li>
											</ul>
										</div>
										<div id="content2">
										<div class="tab" style="display:block;">
											<li v-for="part in parts" style="width:215px;height:50px;">
												{{part.cpuname}}
											</li>
										</div>
										<div class="tab" style="display:none;"> 
											<li v-for="part in parts" style="width:215px;height:50px;">
												{{part.gpuname}}
											</li>
										</div>
										<div class="tab" style="display:none;"> 
											<li v-for="part in parts" style="width:215px;height:50px;">
											 {{part.ncname}}
											</li>
										</div>
									</div>   
								</ul>
							</div>
						</div>
					</div>
                    
                    <div class='saoma'></div>
				<script type="text/javascript">
					var vm2 = new Vue({
						el: '#app2',
						data:{
							 parts:parts
							},
							computed: {
							
							}
					    })
					var vm3 = new Vue({
						el: '#app3',
						data:{
							parts:[
							{cpuname:'奔腾G4560',
							 gpuname:'AMD R470',
							 ncname:'金士顿 4G DDR4'},
							{cpuname:'酷睿I7 4790k',
							 gpuname:'GTX1050',
							 ncname:'金士顿 8G DDR4'},
							{cpuname:'酷睿I5 4590',
							 gpuname:'GTX1060',
							 ncname:'海岛船 8G DDR4'},
							{cpuname:'酷睿I3 7300',
							 gpuname:'AMD R480',
							 ncname:'金士顿 4G DDR3'},
								]
							},
							computed: {
							
							}
					    })
				</script>
				<script type="text/javascript">
    var lis = document.getElementById("ul1").getElementsByTagName("li");
    var divs = document.getElementById("content1").getElementsByTagName("div");
    for(var i=0; i<lis.length; i++){


        lis[i].index = i;


      lis[i].onclick = function(){


              for(var j=0; j<lis.length; j++){
                lis[j].className = "";
              }


              this.className ="hover sel";


              for(var i=0; i<divs.length; i++){
                divs[i].style.display="none";
              }


              divs[this.index].style.display = "block";




      }
    };
	var lis1 = document.getElementById("ul2").getElementsByTagName("li");
				var divs1 = document.getElementById("content2").getElementsByTagName("div");
				for(var i=0; i<lis1.length; i++){
					lis1[i].index = i;
					lis1[i].onclick = function(){
						for(var j=0; j<lis1.length; j++){
							lis1[j].className = "";
						}
						this.className ="hover sel";
						for(var i=0; i<divs1.length; i++){
							divs1[i].style.display="none";
						}
						divs1[this.index].style.display = "block";
					}
				};
	


  </script> 
			</div>
		</div>
		<!--底层-->
		<div class='diceng '>
			<div class='di'>©123456789 硬件之家 版权所有，并保留所有权利</div>
		</div>
 </body>
 <script type="text/javascript">
function tc(){ 
	layer.open({
    type: 2,
    title: '提交配置',
    maxmin: true,
    area: ['800px', '500px'],
    content: '表单.htm',
    end: function(){
      layer.tips('Hi', '#about', {tips: 1})
    }
  });
	}
</script>
</html>
